<script setup lang='ts'>
import { NSpin as Spin } from 'naive-ui'

const s = useSlots()

console.log('s', s)
</script>

<template>
  <Spin
    :rotate="false"
    v-bind="$attrs"
  >
    <div class="h-20px">
      custom spin
    </div>

    <template #icon>
      <div class="custom-loader [clip-path:inset(-220%)] aspect-[1] h-[12px] w-[12px] animate-spin-loading rounded bg-black text-black" />
    </template>

    <!-- 渲染默认插槽 -->
    <slot />

    <!-- 渲染具名插槽 -->
    <template
      v-for="(_, name) in $slots"
      :key="name"
      #[name]
    >
      <slot :name="name" />
    </template>
  </Spin>
</template>

<style lang='scss' scoped>
:deep(div:has(> .custom-loader)) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
